<template class="lineCharts">
    <div id="myChart" style="position: relative; top: 70px; width: 390px; height: 10000px; overflow: scroll"/>
</template>

<script>
export default {
    name: 'LineCharts',
    // 数据域
    data() {
        return {
            linePeriod: [],
            data1: [],
            data2: [],
            turation: [2743, 2616, 2646, 2671, 2627, 2645, 2682],
            index: 0,
        }
    },
    // 钩子函数
    mounted() {
        this.getData();
        setTimeout(() => {
            this.handleData()
        }, 300)
        setTimeout(() => {
            this.drawLine()
        }, 500)
    },
    // 方法区
    methods: {
        // 方法域中的其他方法
        getData(){
            // var date1 = new Date()
            this.$axios({
                method: 'get',
                url: 'http://10.112.6.250:8888/static/mino.json',
            }).then((res) => {
                // console.log('res', res);
                // console.log('res.data', res.data);
                // console.log('res.data.data', this.$qs.parse(res.data.data));  //对象形式
                this.linePeriod = Object.values(this.$qs.parse(res.data.data));  //坑：res.data才是postman中显示出来的
                // console.log('linePeriod:\n', this.linePeriod)
                // var date2 = new Date()
                // console.log(date1)
                // console.log(date2)
                // console.log("经过的时间", date2-date1)  //单位ms（10几）
            }).catch((err) => {
                console.log('获取产线工序时错误：' + err);
            })
        },

        handleData(){
            // var total1 = 0; var total2 = 0;
            for(let index0 in this.linePeriod){  //level1
                var value0 = this.linePeriod[index0]
                // console.log(value0)
                for(let index1 in value0.children){  //level2
                    var value1 = value0.children[index1]
                    // console.log(value1)
                    for(let index2 in value1.children){  //level3
                        var value2 = value1.children[index2]
                        // console.log(value2)
                        this.data1.push('level3-'+value2.techniqueName)
                        this.data2.push(this.turation[this.index])
                        // total2 += this.turation[this.index]
                        this.index = (this.index + 1) % 7
                    }
                    // this.data1.push('level2-'+value1.techniqueName)
                    // this.data2.push(total2)
                    // total1 += total2;
                    // total2 = 0

                }
                // this.data1.push('level1-'+value0.techniqueName)
                // this.data2.push(total1)
                // total2 = 0
                // total1 = 0
            }
            // console.log(this.data1)
            // console.log(this.data2)
        },

        // 该方法必须放在方法域中的最后一个
        drawLine() {
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '产线节拍'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {  //y轴数据
                    type: 'category',
                    data: this.data1,//['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
                },
                series: [  //数据
                    {
                        name: '产线节拍',
                        type: 'bar',
                        data: this.data2
                    }
                ]
            };

            // 基于准备好的dom，初始化echarts实例
            var instanceByDom = this.$echarts.getInstanceByDom(window.document.getElementById('myChart'))
            var myChart = instanceByDom === undefined ? this.$echarts.init(window.document.getElementById("myChart")) : instanceByDom
            // 将echarts实例内的对象清空，再重新注入
            myChart.clear()
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
            // resetSize
            // window.onresize = function () {
            //     myChart.resize();
            // };
        }
    },
}
</script>

<style scoped>
.lineCharts {
    width: 100%;
    text-align: center;
}

#myChart {
    width: 100%;
    height: 400px;
}
</style>
